<template>
	<view>
		<!--顶部图片 -->
		<view style="width: 100vw;height: 30vh;">
			<image src="/static/images/LbarginActiveImg_02.png" style="width: 100vw;height: 30vh;" mode=""></image>
		</view>
		<!-- 内容 -->
		<view style="width: 100vw;background-color: #FB6317;" >
			<view 
				style="display: flex;justify-content: space-around;flex-wrap: wrap; padding-top: 2vh;width: 92vw;margin-left: 4vw;background-color: #FEDFB4;border-radius: 10px;box-shadow: 2px -2px 4px 5px #FAB188; ">
				<!-- 商品信息 -->
				<view
					style="border: solid 1px #FBE4BE; width: 40vw;margin-left: 1vh;background-color: #FFF1DE;border-radius: 10px;" v-for="(item,index) in List">
					<!-- 已送出多少件 -->
					<view
						style="font-size: 0.6rem;color: #957042;text-align: center;line-height: 5vh;font-weight: bold; width: 25vw;height: 5vh; margin-left: 7vw;background-color: #FDDDAE;border-radius: 0px 0px  20px 20px; ">
						已送出<text style="font-size: 0.8rem;font-weight: bold;color: #D2332E;">11.2万</text>件
					</view>
					<!-- 商品名称 -->
					<view
						style="width: 40vw;text-align: center;height: 8vh;line-height: 8vh;font-size: 1.1rem;font-weight: bold;color: #6A5436;">
						九阳空气炸锅
					</view>
					<!-- 图片 -->
					<view style="width: 40vw;height: 23vh;">
						<image :src="item.img" style="width: 40vw;height: 23vh;" mode=""></image>
					</view>
					<view style="width: 40vw;height: 1vh;background-color:#FDDDB4 ;"></view>
					<!-- 免费拿点击按钮 -->
					<view style="width: 40vw;height: 8vh;background-color: #FDDDB4;">
						<button style="width: 34vw;margin-left: 3vw;height: 6vh;border-radius: 25px;color: #fff;text-align: center;line-height: 6vh; background-color: #F53305;" @click="toaddress()">
							点击免费
						</button>
					</view>


				</view>

			</view>


		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				List:[
					{
						img:'/static/images/LKongqizg.png',
						title:'九阳空气炸锅'
					},
					{
						img:'/static/images/LKongqizg.png',
						title:'九阳空气炸锅'
					},
					{
						img:'/static/images/LKongqizg.png',
						title:'九阳空气炸锅'
					},
					{
						img:'/static/images/LKongqizg.png',
						title:'九阳空气炸锅'
					},
				]
			}
		},
		methods: {
            toaddress(){
				uni.navigateTo({
					url:'../SecKill-active/Product-details/settlement/settlement'
				})
			}
		}
	}
</script>

<style>

</style>
